<template>

<view class="container">

<view class="con-inp" @click="state=null">

<!-- 全国 -->

<view class="con-icon">

<uni-icons class="icon" type="location" size="30"></uni-icons>

全国

</view>

<!-- input输入框 -->

<view class="inp">

<input type="text" placeholder="搜索品牌车型">

</view>

</view>

<!-- 下拉 -->

<view class="drop-down">

<view @click="state=2" class="drop-down-li">品牌</view>

<!-- 品牌 -->

<view class="abs">

<view @click="state=null" :style="{display: state===2?'block':'none'}" class="dome pp">

<view class="pp-li" v-for="(item,index) in userCarBrandList" :key="index">

<image :src="item.imageUrl" mode=""></image>

{{item.brand}}

</view>

</view>

</view>

<view @click="state=4" class="drop-down-li">车型</view>

<!-- 车型 -->

<view class="abs">

<view @click="state=null" :style="{display: state===4?'block':'none'}" class="dome cx">

<view v-for="(item,index) in userCarModelList" :key="index">

<image :src="item.logo" mode=""></image>

{{item.model}}

</view>

</view>

</view>

<view @click="state=3" class="drop-down-li">价格</view>

<!-- 价格 -->

<view class="abs">

<view @click="state=null" :style="{display: state===3?'block':'none'}" class="dome jg">

<view v-for="(item,index) in userCarPirceList" :key="index">

{{item.label}}

</view>

</view>

</view>

</view>

<!-- button -->

<view class="btn" @click="state=null">

<view class="btn-li">腾发自营</view>

<view class="btn-li">车主自营</view>

<view class="btn-li">限时特惠</view>

<view class="btn-li">严选好车</view>

</view>

<!-- 新车列表 -->

<view class="newCarList">

<view class="newCar-li" v-for="(item,index) in newCarLists" :key="index">

<view class="name">{{item.seoName}}</view>

<view class="tag">

<view>{{item.type}}</view>

<view>{{item.colorLabel}}</view>

</view>

<view class="pic" style="color: red;">{{item.currentPrice+'万'}}</view>

</view>

</view>

</view>

</template>



<script setup>

import {

userCarBrand,

userCarPirce,

userCarModel,

newCarList

} from "../../utils/ajax.js"

import {

ref,

reactive

} from "vue"

// 接收父组件传值



const state = ref(null)

// 品牌数据

const userCarBrandList = reactive([])

userCarBrand().then((res) => {

// console.log(res.data.data);

userCarBrandList.push(...res.data.data.content)

})

// 价格

const userCarPirceList = reactive([])

userCarPirce().then((res) => {

// console.log(res.data.data);

userCarPirceList.push(...res.data.data)

})

// 车型

const userCarModelList = reactive([])

userCarModel().then((res) => {

// console.log(res.data.data);

userCarModelList.push(...res.data.data.content)

})

// 新车数据

const newCarLists = reactive([])

newCarList({

page: 1,

sort: ''

}).then((res)=> {

console.log(res.data.data);

newCarLists.push(...res.data.data.content)

})

</script>



<style lang="scss">

.con-inp {

width: 700rpx;

height: 100rpx;

display: flex;

justify-content: space-between;

}



.inp input {

background-color: #F8F8F8;

width: 550rpx;

height: 80rpx;

border-radius: 100rpx;

padding: 0 100rpx;

box-sizing: border-box;

}



.con-icon {

font-size: 35rpx;

height: 80rpx;

width: 150rpx;

padding: 10rpx 0;

box-sizing: border-box;

line-height: 40rpx;

}



.con-icon .icon {

vertical-align: bottom;

}



.drop-down {

position: relative;

width: 550rpx;

padding: 20rpx 100rpx;

display: flex;

justify-content: space-between;

}



.drop-down .abs {

position: absolute;

z-index: 99;

width: 100%;

top: 100rpx;

left: 20rpx;

}



.drop-down .abs .dome {

padding: 20rpx;

width: 700rpx;

box-sizing: border-box;

background-color: #fff;

box-shadow: 0 0 20rpx 0 #999;

border-radius: 0 0 20rpx 20rpx;

width: 700rpx;

}



.drop-down .px view {

padding: 20rpx 0;

text-align: left;

border-bottom: 1px solid #eee;

}



.drop-down .pp view {

padding: 20rpx 0;

text-align: left;

border-bottom: 1px solid #eee;

}



.drop-down .pp view image {

width: 50rpx;

height: 50rpx;

vertical-align: middle;

}



.drop-down .jg {

width: 700rpx;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}



.drop-down .jg view {

display: inline-block;

margin: 5rpx 10rpx;

box-sizing: border-box;

width: 200rpx;

font-size: 20rpx;

height: 70rpx;

padding: 20rpx 30rpx;

text-align: center;

background-color: #F5F7FE;

border-radius: 30rpx;

}



.drop-down .cx view {

display: inline-block;

margin: 5rpx 0rpx;

box-sizing: border-box;

width: 220rpx;

font-size: 20rpx;

height: 70rpx;

padding: 20rpx 30rpx;

text-align: left;

border-radius: 30rpx;

}



.drop-down .cx view image {

width: 50rpx;

height: 50rpx;

vertical-align: middle;

}



.drop-down .gd .gdBox {

margin: 50rpx 0;

}



.drop-down .gd .gdBox .gdLi {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}



.drop-down .gd .gdBox .gdLi view {

width: calc(600rpx / 3);

background-color: #F5F7FE;

margin: 20rpx 0;

text-align: center;

border-radius: 50rpx;

}

.btn {

position: relative;

width: 700rpx;

padding: 20rpx;

display: flex;

justify-content: space-between;

}



.btn .btn-li {

padding: 10rpx 30rpx;

background-color: #F5F7FE;

border-radius: 30rpx;

font-size: 20rpx;



}

.newCarList {

padding: 20rpx;

width: 700rpx;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

position: relative;

}



.newCarList::after {

content: "";

width: 600rpx;

height: 2rpx;

background-color: #ccc;

position: absolute;

bottom: 0;

left: 60rpx;

}



.newCarList .name {

font-size: 35rpx;

font-weight: 600;

}



.newCarList .tag view {

margin: 5rpx 0 20rpx 0;

display: inline-block;

margin-right: 30rpx;

background-color: #2567FF;

color: #fff;

}

</style>